<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.content {
		        width: 300px;
		        height: 300px;
		        box-shadow: 0px 5px 10px 0px rgb(177, 174, 174);
		        background-color: rgb(243, 225, 202);
		        background-image: linear-gradient(rgb(250, 203, 203) 60%,
		            rgba(22, 21, 21, 0.8));
		        overflow: hidden;
		        position: relative;
		    }
		 
		    .content p {
		        color: rgb(252, 247, 247);
		        font-size: 30px;
		        text-align: center;
		        line-height: 150px;
		        position: relative;
		        z-index: 99999;
		        font-weight: bold;
		        font-family: serif;
		    }
		 
		    .wave {
		        position: absolute;
		        width: 550px;
		        height: 550px;
		        top: -300px;
		        left: -100px;
		        background-color: rgba(111, 194, 243, 0.3);
		        border-radius: 38%;
		        animation: drift 5s linear infinite;
		    }
		 
		    .wave:nth-of-type(1) {
		        animation-duration: 5s;
		    }
		 
		    .wave:nth-of-type(2) {
		        animation-duration: 7s;
		    }
		 
		    .wave:nth-of-type(3) {
		        animation-duration: 10s;
		    }
		 
		    @keyframes drift {
		        from {
		            transform: rotate(360deg);
		        }
		    }
	</style>
	<body>
		<div class="content">
			<p>苏苏</p>
			<span class="wave"></span>
			<span class="wave"></span>
			<span class="wave"></span>
		</div>
	</body>
</html>
